<template>
  <div class="app-container">

    <u-page title="会员管理">

      <u-filtered>
        <el-form :inline="true" :model="listQuery" class="search-form">
          <el-form-item label="卡号" prop="cardno">
            <el-input v-model="listQuery.cardno" placeholder="请输入卡号" clearable style="width: 170px" />
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="listQuery.mobile" placeholder="请输入手机号" clearable style="width: 160px" />
          </el-form-item>
          <el-form-item label="OPENID" prop="openid">
            <el-input v-model="listQuery.openid" placeholder="请输入OPENID" style="width: 280px" clearable />
          </el-form-item>
          <el-form-item label="等级" prop="status">
            <level v-model="listQuery.level" />
          </el-form-item>
          <el-form-item label="渠道" prop="channel">
            <channel v-model="listQuery.channel" />
          </el-form-item>
          <el-form-item label="注册时间">
            <u-date-time-picker v-model="searchDate" @change="changeDate" />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="listQuery.status" placeholder="请选择状态" class="status" clearable>
              <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="hdlFilter">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-dropdown>
              <el-button type="primary">
                更多操作<i class="el-icon-arrow-down el-icon--right" />
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="openMerge">会员合并</el-dropdown-item>
                <el-dropdown-item @click.native="openWxInfo">获取微信</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-form-item>
        </el-form>
      </u-filtered>

      <u-table
        :data="list"
        :loading="listLoading"
        :options="listOptions"
        :columns="columns"
        :pagination.sync="listQuery"
        :fetch="hdlList"
        @selection-change="hdlSelectChange"
      >
        <template v-slot:right>
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="text" @click="handleView(row)">详情</el-button>
              <el-button type="text" @click="handleEdit(row)">编辑</el-button>
              <el-dropdown style="margin-left: 10px;">
                <el-button type="text">更多</el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="handleOpenDisable(row)">更改状态</el-dropdown-item>
                  <el-dropdown-item @click.native="handleHealth(row)">健康状态</el-dropdown-item>
                  <el-dropdown-item divided @click.native="handleUnbindOpenid(row)">解绑微信</el-dropdown-item>
                  <el-dropdown-item divided @click.native="handleCreditAccount(row)">积分账户</el-dropdown-item>
                  <el-dropdown-item @click.native="handleOpenCredit(row)">积分操作</el-dropdown-item>
                  <el-dropdown-item @click.native="handleCreditDetaile(row)">积分明细</el-dropdown-item>
                  <el-dropdown-item divided @click.native="handleOrderPoints(row)">补录销售</el-dropdown-item>
                  <el-dropdown-item divided @click.native="handleOpenUpgraded(row)">升级操作</el-dropdown-item>
                  <el-dropdown-item @click.native="handleOpenUpgradeDetail(row)">升级明细</el-dropdown-item>
                  <el-dropdown-item divided @click.native="handleConsumeData(row)">消费统计</el-dropdown-item>
                  <el-dropdown-item @click.native="handleConsumeDetaile(row)">消费记录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </template>
      </u-table>

    </u-page>

    <u-dialog title="编辑会员" :show.sync="dialogFormVisible" @confirm="hdlUpdate()">
      <el-form ref="dialogForm" :rules="rules" :model="dataForm" label-width="80px">

        <el-form-item prop="member_name" label="姓名">
          <el-input v-model="dataForm.member_name" placeholder="姓名" clearable minlength="1" maxlength="20" show-word-limit />
        </el-form-item>

        <el-form-item prop="mobile" label="手机号">
          <el-input v-model="dataForm.mobile" placeholder="手机号" maxlength="11" clearable show-word-limit />
        </el-form-item>

        <el-form-item prop="identity_id" label="身份证">
          <el-input v-model="dataForm.identity_id" placeholder="身份证" maxlength="18" clearable show-word-limit />
        </el-form-item>

        <el-form-item prop="birthday" label="生日">
          <el-date-picker v-model="dataForm.birthday" type="date" value-format="yyyy-MM-dd" placeholder="选择生日" />
        </el-form-item>

        <el-form-item prop="sex" label="性别">
          <el-radio-group v-model="dataForm.sex" size="small">
            <el-radio-button :label="2">保密</el-radio-button>
            <el-radio-button :label="0">男</el-radio-button>
            <el-radio-button :label="1">女</el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item prop="contact_address" label="地址">
          <el-input v-model="dataForm.contact_address" type="textarea" placeholder="地址" clearable maxlength="200" show-word-limit />
        </el-form-item>

        <el-form-item prop="remark" label="备注">
          <el-input v-model="dataForm.remark" type="textarea" placeholder="后台备注" clearable maxlength="200" show-word-limit />
        </el-form-item>
      </el-form>
    </u-dialog>

    <!-- 会员详情 -->
    <member-detail v-model="dialogDetailVisible" :data="detailQuery" @change="hdlList" />

    <!-- 更改会员状态 -->
    <status v-model="dialogStatusVisible" :data="statusListQuery" @change="hdlList" />

    <!-- 会员合并 -->
    <merge v-model="dialogMergeVisible" @change="hdlList" />

    <!-- 扫码获取会员微信信息-->
    <wxInfo v-model="dialogWxInfoVisible" @change="handleOpenid" />

    <!-- 积分明细 -->
    <credit-detaile v-model="dialogCreditVisible" :data="creditListQuery" />

    <!-- 积分操作 -->
    <credit v-model="dialogRechargeVisible" :data="creditQuery" @change="hdlList" />

    <!-- 补录积分操作 -->
    <add-order-points v-model="dialogOrderPointsVisible" :data="orderPointsQuery" @change="hdlList" />

    <!-- 升级操作 -->
    <upgraded v-model="dialogUpgradedVisible" :data="upgradedQuery" @change="hdlList" />

    <!-- 升级明细 -->
    <upgrade-detaile v-model="dialogUpgradeVisible" :data="upgradeListQuery" />

    <!-- 订单列表 -->
    <order-list ref="orderListRef" v-model="dialogConsumeVisible" :data="consumeListQuery" />

    <!-- 积分账户 -->
    <credit-account v-model="dialogCreditAccountVisible" :data="creditAccountQuery" />

    <!-- 消费统计 -->
    <consume-data v-model="dialogConsumeDataVisible" :data="consumeDataQuery" />

  </div>
</template>
<script>
import level from '@/components/member/level'
import channel from '@/components/member/channel'
import wxInfo from './components/WxInfo'
import CreditDetaile from './components/CreditDetaile'
import UpgradeDetaile from './components/UpgradeDetaile'
import OrderList from './components/OrderList'
import Merge from './components/Merge'
import Status from './components/Status'
import Credit from './components/Credit'
import AddOrderPoints from './components/AddOrderPoints'
import Upgraded from './components/Upgraded'
import MemberDetail from './components/MemberDetail.vue'
import CreditAccount from './components/CreditAccount.vue'
import ConsumeData from './components/ConsumeData.vue'
export default {
  components: {
    MemberDetail,
    Credit,
    AddOrderPoints,
    level,
    channel,
    wxInfo,
    CreditDetaile,
    UpgradeDetaile,
    OrderList,
    Merge,
    Status,
    Upgraded,
    CreditAccount,
    ConsumeData
  },
  data() {
    return {
      statusList: [{ value: '', label: '全部' }, { value: '0', label: '正常' }, { value: '-1', label: '禁用' }],
      api: this.$u.api.Member,
      // 表格
      columns: [
        {
          prop: 'member_name',
          label: '姓名',
          width: '80'
        },
        {
          prop: 'card_no',
          label: '卡号',
          width: '120'
        },
        {
          prop: 'mobile',
          label: '手机号'
        },
        {
          prop: 'openid',
          label: 'OPENID',
          width: '220'
        },
        {
          prop: 'level_name',
          align: 'left',
          label: '等级'
        },
        {
          prop: 'credit',
          label: '积分',
          render: (h, params) => {
            return h('span', { style: { fontWeight: 'bold' }}, params.row.credit)
          }
        },
        {
          prop: 'status',
          label: '状态',
          render: (h, params) => {
            if (params.row.status === 0) {
              return h('el-tag', { props: { type: 'success' }}, '正常')
            } else {
              return h('el-tag', { props: { type: 'danger' }}, '禁用')
            }
          }
        },
        {
          prop: 'input_date',
          label: '注册时间'
        },
        {
          prop: 'channel_name',
          label: '渠道'
        },
        {
          prop: 'remark',
          label: '备注'
        }
      ],

      list: [],
      listLoading: false,
      listOptions: {
        mutiSelect: true,
        stripe: true
      },
      listQuery: {
        page: 1,
        pageSize: 10,
        totalCount: 1,
        openid: '',
        cardno: '',
        mobile: '',
        status: '',
        level: '',
        channel: ''
      },
      searchDate: [],
      // 修改会员
      dialogFormVisible: false,
      dataQuery: {},
      rules: {
        mobile: [
          { required: true, message: '请输入账号', trigger: ['blur'] }
        ],
        nickname: [
          { required: true, message: '请输入用户名', trigger: ['blur'] }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: ['blur'] }
        ]
      },
      // 会员详情
      dialogDetailVisible: false,
      detailQuery: {},
      // 更改会员状态
      dialogStatusVisible: false,
      statusListQuery: {},
      // 会员合并模块
      dialogMergeVisible: false,
      dataMergeForm: {},
      // 获取微信
      dialogWxInfoVisible: false,
      selectWxInfoData: '',
      // 积分操作
      dialogRechargeVisible: false,
      creditQuery: {},
      // 积分明细
      dialogCreditVisible: false,
      creditListQuery: {},
      // 升级明细
      dialogUpgradeVisible: false,
      upgradeListQuery: {},
      // 消费明细
      dialogConsumeVisible: false,
      consumeListQuery: {},
      // 升级操作
      dialogUpgradedVisible: false,
      upgradedQuery: {},
      // 补积分操作
      dialogOrderPointsVisible: false,
      orderPointsQuery: {},
      // 消费统计数据
      dialogConsumeDataVisible: false,
      consumeDataQuery: {},
      // 积分账户
      dialogCreditAccountVisible: false,
      creditAccountQuery: {}
    }
  },
  methods: {
    // 注册时间
    changeDate(item) {
      if (item) {
        this.listQuery.beginTime = item[0]
        this.listQuery.endTime = item[1]
      } else {
        this.listQuery.beginTime = ''
        this.listQuery.endTime = ''
      }
    },
    // 打开更改会员状态弹窗
    handleOpenDisable(row) {
      this.statusListQuery = row
      this.dialogStatusVisible = true
    },
    // 提交更新数据事件
    hdlUpdate() {
      const self = this
      self.$confirm('此操作将修改 【' + self.dataForm.member_name + '】 信息，是否继续？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
        // 效验数据格式
        self.$refs['dialogForm'].validate((valid) => {
          if (valid) {
            // 提交更新数据
            self.api.update(self.dataForm).then(() => {
              // 刷新数据列表
              self.hdlList()
              // 关闭弹窗状态
              self.dialogFormVisible = false
              // 通知信息
              self.$u.msg('更新成功')
            })
          }
        })
      }).catch(() => {
      })
    },
    // 打开会员详情
    handleView(row) {
      const { card_id } = row
      const self = this
      // 获取用户信息
      self.api.fetch(card_id).then(res => {
        self.detailQuery = res.data
        self.dialogDetailVisible = true
      })
    },
    // 打开修改会员
    handleEdit(row) {
      const { card_id } = row
      const self = this
      // 获取用户信息
      self.api.fetch(card_id).then(res => {
        self.dataForm = res.data
        self.dialogFormVisible = true
      })
    },
    // 检查会员健康状态
    handleHealth(row) {
      const self = this
      self.$confirm('此操作将检测 【' + row.member_name + '】 账号的健康状态，是否继续？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
        self.api.health(row).then(res => {
          const { isMobile, isOpenid } = res.data
          const content = '检测手机号:' + (isMobile ? '已重复' : '正常')
          const content2 = '检测OPENID:' + (isOpenid ? '已重复' : '正常')

          self.$alert(content + '<br/>' + content2, '检测 【' + row.member_name + '】 的健康状态结果', {
            dangerouslyUseHTMLString: true,
            confirmButtonText: '知道了'
          })
        })
      }).catch(() => {
      })
    },
    // 打开会员合并模块
    openMerge() {
      this.dialogMergeVisible = true
    },
    // 解绑会员OPENID记录
    handleUnbindOpenid(row) {
      const self = this
      self.$confirm('此操作将解除 【' + row.member_name + '】 的OPENID绑定，是否继续？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
        self.api.unbind(row).then(res => {
          this.hdlList()
          this.$u.msg('解绑成功')
        })
      }).catch(() => {
      })
    },
    // 打开积分明细弹窗
    handleCreditDetaile(row) {
      this.creditListQuery = row
      this.dialogCreditVisible = true
    },
    // 打开积分操作弹窗
    handleOpenCredit(row) {
      this.creditQuery = row
      this.dialogRechargeVisible = true
    },
    // 获取微信-打开弹窗
    openWxInfo() {
      this.dialogWxInfoVisible = true
    },
    // 获取微信-选择会员返回openid
    handleOpenid(openid) {
      this.listQuery.openid = openid
      this.dialogWxInfoVisible = false
    },
    // 打开升级操作
    handleOpenUpgraded(row) {
      this.upgradedQuery = row
      this.dialogUpgradedVisible = true
    },
    // 打开升级明细弹窗
    handleOpenUpgradeDetail(row) {
      this.upgradeListQuery = row
      this.dialogUpgradeVisible = true
    },
    // 打开消费明细弹窗
    handleConsumeDetaile(row) {
      this.consumeListQuery = row
      this.dialogConsumeVisible = true
    },
    // 打开补积分操作弹窗
    handleOrderPoints(row) {
      this.orderPointsQuery = row
      this.dialogOrderPointsVisible = true
    },
    // 打开消费统计弹窗
    handleConsumeData(row) {
      this.consumeDataQuery = row
      this.dialogConsumeDataVisible = true
    },
    // 打开积分账户弹窗
    handleCreditAccount(row) {
      this.creditAccountQuery = row
      this.dialogCreditAccountVisible = true
    }
  }
}
</script>
<style>
.el-select .el-input {
  width: 220px;
}
</style>
<style lang="scss" scoped>
.app-container{
  .item >>> .el-form-item__content {
    display: flex;
  }
  .status {
    ::v-deep{
      .el-input{
        width: 140px;
      }
    }
  }
  ::v-deep{
    .el-table-expand {
      font-size: 0;

      label {
        width: 90px;
        color: #99a9bf;
        font-size: 12px;
      }

      .el-form-item{
        margin-bottom: 2px;
        margin-right: 0;
        vertical-align: top;
      }

      .el-form-item__content {
        margin-right: 0;
        margin-bottom: 0;
        font-size: 12px;
        display: inline-block;
        vertical-align: top;
        position: relative;
      }
    }
  }
}
</style>
